window.addEventListener('load',function(){
  var rightBox = document.querySelector('.right-box');
  var rightItems = document.querySelectorAll('.right-list .item');
  var lous = document.querySelectorAll('main .lou');
  var daohang = document.querySelector('.daohang');
  // console.log(lous[0].offsetTop);
  
  // 1、点击右侧选项（就像电梯楼层的按钮），让页面滚动到指定位置
  // 指定位置 = 每一层的元素相对于页面顶部的偏移量 offsetTop
  for(var i = 0; i < rightItems.length; i++){
    rightItems[i].index = i;
    rightItems[i].onclick = function(){
      // for(var i = 0; i < rightItems.length; i++){
      //   rightItems[i].classList.remove('active');
      // }
      // this.classList.add('active');
      document.scrollingElement.scrollTop = lous[this.index].offsetTop - 60;
    }
  }
  
  
  // 2、滚动页面，切换右侧选项item的active
  var index = 0;
  window.onscroll = function(){
    var scrollTop = document.scrollingElement.scrollTop;
    var clientHieght = document.documentElement.clientHeight;
    // if (scrollTop+clientHieght/2 > lous[1].offsetTop) {
    //   //天猫国际被点亮
    //   index = 1;
    // }
    // if (scrollTop+clientHieght/2 > lous[2].offsetTop) {
    //   //美丽人生被被点亮
    //   index = 2;
    // }
    // if (scrollTop+clientHieght/2 > lous[3].offsetTop) {
    //   //潮电酷玩被被点亮
    //   index = 3;
    // }
  
    // console.log(scrollTop+clientHieght/2, lous[0].offsetTop, lous[1].offsetTop, lous[2].offsetTop);
    
    for(var i = 0; i < rightItems.length; i++){
      rightItems[i].classList.remove('active');
      // 当i=0, lous[0].offsetTop=1668
      // 当i=1, lous[1].offsetTop=2668
      // 当i=2, lous[2].offsetTop=3708
      if (scrollTop+clientHieght/2 > lous[i].offsetTop) {
        // console.log('i=',i);
        //潮电酷玩被被点亮
        index = i;
      }
    }
    rightItems[index].classList.add('active');
  
    if (scrollTop+500 > lous[0].offsetTop) {
      //右侧边出来
      rightBox.style.transform = 'scale(1)';
    }else{
      // 右侧边隐藏
      rightBox.style.transform = 'scale(0)';
  
    }
    if (scrollTop >= 128) {
      daohang.style.position = 'fixed';
      // daohang.style.left = '18%';
      // daohang.style.marginRight = 'calc(1170px / 2 + 10px)';
      // daohang.style.top2='0';
      // daohang.style.left = '0px';
    } else {
      daohang.style.position = 'relative';
      // daohang.style.left = '';
      // daohang.style.marginRight = '';
    }

    }  
// 侧边固定栏hover 
// var sidebar_lis = document.querySelectorAll(".sidebar_fxd li");
// var sidebar_hover = document.querySelectorAll(" .hover_box");
// for (let i = 0; i < sidebar_lis.length; i++) {
//     if (i == 0) {
//         sidebar_lis[i].addEventListener("mouseover", function () {
//             sidebar_hover[i].style.width = `${300}px`;
//             sidebar_hover[i].style.border = `${1}px solid #ccc`;

//         })
//         sidebar_lis[i].addEventListener("mouseout", function () {
//             sidebar_hover[i].style.width = 0 + "px";
//             sidebar_hover[i].style.border = `${0}px solid #ccc`;

//         })

//     } else if (i == 1) {
//         continue;
//     } else {
//         sidebar_lis[i].addEventListener("mouseover", function () {
//             sidebar_hover[i].style.width = `${100}px`;
//             sidebar_hover[i].style.border = `${1}px solid #ccc`;

//         })
//         sidebar_lis[i].addEventListener("mouseout", function () {
//             sidebar_hover[i].style.width = 0 + "px";
//             sidebar_hover[i].style.border = `${0}px solid #ccc`;

//         })
//     }
// }
// sidebar_lis[sidebar_lis.length - 1].addEventListener("click", function (e) {
//     document.documentElement.scrollTop = 0;
// })

//ppxc
var xc1 = document.querySelectorAll(".xc1");
var xca = document.querySelectorAll(".xc1 a");
for (var i = 0; i < xc1.length; i++) {
  xc1[i].index = i;
  xc1[i].onmouseenter = function(e) {
      for (var j = 0; j < xca.length; j++) {
          xca[j].style.opacity = '0';
      }
      xca[this.index].style.opacity = '1';
  }
  xc1[i].onmouseleave = function(e){
    for (var j = 0; j < xca.length; j++) {
      xca[j].style.opacity = '0';
  }
}
}


})